<template>
  <div>
    <a-modal
      title="轮班排班"
      :visible="visible"
      :confirm-loading="confirmLoading"
      :width="600"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form-model ref="ruleForm" :model="formData" :rules="rules" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
        <a-form-model-item label="首班次" prop="shift_no">
          <a-select v-model="formData.shift_no" style="width: 100%">
            <a-select-option v-for="(item,index) in classesList" :key="index" :value="item.order_no">【{{item.order_no}}】{{item.class_name}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="班次期限" prop="dates">
          <a-range-picker v-model="formData.dates" valueFormat="YYYY-MM-DD" style="width: 100%"></a-range-picker>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>
  
  <script>
import { getShiftAttClassDetailApi,editScheduleShitPlanApi } from '@/api/attendance'
export default {
  data() {
    return {
      visible: false,
      confirmLoading: false,
      formData: {
        person_keys: [],
        shift_no: '', // 首班次
        dates: [],
        shift_key: '',
      },
      rules: {
        shift_no: [{ required: true, message: '请选择首班次', trigger: 'change' }],
        dates: [{ required: true, message: '请选择班次期限', trigger: 'change' }],
      },
      classesList: []
    }
  },
  methods: {
    edit(person_keys,shift_key) {
      this.formData.person_keys = person_keys
      this.formData.shift_key = shift_key
      this.visible = true
      this.getShiftAttClassDetail()
    },
    handleOk() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.confirmLoading = true
          const {person_keys,dates,shift_no,shift_key} = this.formData
          let formObj = {
            person_keys,
            start_date: dates[0],
            end_date: dates[1],
            shift_no,
            shift_key
          }
          const { statusCode, errors } = await editScheduleShitPlanApi(formObj)
          this.confirmLoading = false
          if (statusCode == 200) {
            this.visible = false
            this.$message.success('保存成功！')
            this.$emit('success')
            this.$parent.getTableData()
          } else {
            this.$message.error(errors)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleCancel() {
      this.visible = false
    },
    // 获取轮班列表
    async getShiftAttClassDetail() {
      const { data } = await getShiftAttClassDetailApi({
        pkey: this.formData.shift_key
      })
      this.classesList = data.classes
    }
  },
}
</script>
  
  <style lang="scss" scoped>
</style>